
// For debug output to console
CanvasObject.debug = true;

function CanvasObject(tagType) {
	this.dprint("CanvasObjectV2 constructor: type->" + tagType);
	
	this.id = "object" + (CanvasObject.nextId++);
	this.parent = null;
	this.isSelected = false;
	
	if (tagType != undefined) {
		this.tagType = tagType;
	} else {
		this.tagType = "div";
	}
	
	this.classes = new Array();
	this.customCss = new Array();
	
	this.initDomElem();
	
	// Set up default attributes
	for( var i=0; i<CanvasObject.attributes.length; i++ ) {
		var attr = CanvasObject.attributes[i];
		//this.dprint("attr: " + attr.name + " value: " + attr.value);
		if (attr.value != undefined) {
			this.setAttribute(attr.name, attr.value);
		}
	}
}


CanvasObject.className = "CanvasObject";
CanvasObject.nextId = 0;

CanvasObject.attributes = new Array(
	{ name: "id" },
	{ name: "x", cssName: "left", value: 100 },
	{ name: "y", cssName: "top", value: 100},
	{ name: "width", cssName: "width", value: 100},
	{ name: "height", cssName: "height", value: 100},
	{ name: "opacity", cssName: "opacity", value: "0.8"},
	{ name: "background", cssName: "background", value: "#d0d0d0"},
	{ name: "backgroundImage", cssName: "background-image", value: ""},
	{ name: "z-index", cssName: "z-index", value: "1"}
);

CanvasObject.prototype.initDomElem = function() {
	// Create DOM element
	//this.container = $("#canvas");
	this.domElem = $("<"+"div"+" id='"+this.id+"' class='object ui-widget-content'></div>");

	// TODO: fix this to use the parent, not the global canvas
	theCanvas().domElem.append(this.domElem);
	
	// Set up click handlers
	var obj = this;
	this.domElem.draggable({ 
		containment: theCanvas().domElem, 
		start: function(event, ui) {
			obj.dprint("start draggin");
			obj.parent.setSelectedObject(this);
			//_objects[this.id].setIsSelected(true);
		},
		drag : function(event, ui) {
			obj.setAttribute("x", obj.domElem.position().left);
			obj.setAttribute("y", obj.domElem.position().top);
		
			//obj.setX(obj.domElem.position().left);
			//obj.setY(obj.domElem.position().top);
		},
		stop: function(event, ui) {
			obj.setAttribute("x", obj.domElem.position().left);
			obj.setAttribute("y", obj.domElem.position().top);
	
			//obj.setX(obj.domElem.position().left);
			//obj.setY(obj.domElem.position().top);
			obj.dprint("done draggin");
		}
	});
	
	this.domElem.resizable({ 
		handles: 'se, sw, ne, nw',
		containment: theCanvas().domElem,
		resize: function(event, ui) {
			obj.setWidth(obj.domElem.width());
			obj.setHeight(obj.domElem.height());
		},
		stop: function(event, ui) {
		
		}
		
	});
		
	this.domElem.click(function(e) {
	
		obj.dprint("click!");
		
		if (obj == obj.parent.shapeBeingMade) {
			obj.parent.endCreatingShape();
		} else {			
			obj.parent.setSelectedObject(this);
			//_objects[this.id].setIsSelected(true);
	
			e.stopPropagation();
			//this.setIsSelected(!this.selected);
		}
	});
	
	this.domElem.mouseenter(function(e) { $(this).toggleClass("hover", true); });
	this.domElem.mouseleave(function(e) { $(this).toggleClass("hover", false); });
};

CanvasObject.prototype.setAttribute = function(name, value) {
	this.dprint("set value: " + name + "->" + value);
	
	var method = "set" + name.substring(0,1).toUpperCase() + name.substring(1);
	if( this[method] == undefined ) {
		this.dprint("No method for attr: " + name + " -> " + value);
		if (value == "") {
			
		} else {
			this[name] = value;
		}
		this.domElem.css(name, value);
	} else {
		this[method](value);
	}
	theControlPanel().objectAttributeChanged(name, value);
};

CanvasObject.prototype.setCss = function(name, value) {
	this.dprint("setCss: " + name + "->" + value);
	
	if (value == "") {
		delete this.customCss[name]
		this.domElem.css(name, "");
	} else {
		this.customCss[name] = value;
		this.domElem.css(name, value);
	}
	
	theControlPanel().objectAttributeChanged(name, value);
	//this.valueChanged();
};

CanvasObject.prototype.dumpHtml = function() {
	this.dprint("dumpHtml");
	
	var str = "<"+this.tagType+" id=\"" + this.parent.id + "_" + this.id + "\" class=\"" + this.parent.id + '_object\" />';
	
	this.dprint(escapeHtml(str));
	
	return str;
};

CanvasObject.prototype.dumpCss = function() {
	this.dprint("dumpCss");
	
	//var str = "<style>\n";
	
	var str = "\t#"+this.parent.id + "_" + this.id+"{\n";
	
	for (var i=0; i<CanvasObject.attributes.length; i++) {
		var opt = CanvasObject.attributes[i];
		if (opt.cssName != undefined) {
			str += "\t\t" + opt.cssName + ": " + this[opt.name] + ";\n ";
		}
	}
	
	for (var attr in this.customCss) {
		var value = this.customCss[attr];
		str += "\t\t" + attr + ": " + value + ";\n ";
	} 
	
	str += "\t\tposition: absolute;\n";
	
	str += "\t}";
	//str += "</style>";
	
	return str;
};

CanvasObject.prototype.destroy = function() {
	this.dprint("destroy");
	
	this.domElem.remove();
};

CanvasObject.prototype.setIsSelected = function(value) {
	this.dprint("setIsSelected: " + value);

	this.isSelected = value;
	this.domElem.toggleClass("selected", value);
	
	this.valueChanged();
};

//
//  CanvasObject Attribute Getters/Setters
//
CanvasObject.prototype.setId = function(newId) {
	this.dprint("setId: " + newId);
	
	delete this.parent.objects[this.id];
	
	this.id = newId;
	this.domElem.attr('id', newId);
	
	this.parent.objects[this.id] = this;
	
	this.valueChanged();
};

CanvasObject.prototype.addClass = function(className) {
	this.dprint("addClass: " + className);
	
	var tokens = className.split(" ");
	for (var i=0; i<tokens.length; i++) {
		if(this.classes[tokens[i]] == undefined) {
			this.classes[tokens[i]] = tokens[i];
		}
	}
	theControlPanel().fullRefresh();
}

CanvasObject.prototype.removeClass = function(className) {
	this.dprint("removeClass: " + className);

	var tokens = className.split(" ");
	for (var i=0; i<tokens.length; i++) {
		if (this.classes[tokens[i]] != undefined) {
			delete this.classes[tokens[i]];
		}
	}
	theControlPanel().fullRefresh();
}

CanvasObject.prototype.setX = function(newX) {
	this.dprint("setX: " + newX);
	
	this.x = Math.floor(newX);
	this.domElem.css( "left", ""+(this.x)+"px" );
	
	this.attributeChanged("x", newX);
	//this.valueChanged();
};

CanvasObject.prototype.setY = function(newY) {
	this.dprint("setY: " + newY);
	
	this.y = Math.floor(newY);
	this.domElem.css( "top", ""+(this.y)+"px" );
	
	//this.valueChanged();
	this.attributeChanged("y", newY);
};

CanvasObject.prototype.setWidth = function(newW) {
	this.dprint("setWidth: " + newW);
	
	this.width = newW;
	this.domElem.css("width", ""+(newW)+"px");
	//this.valueChanged();
	this.attributeChanged("width", newW);
};

CanvasObject.prototype.setHeight = function(newH) {
	this.dprint("setHeight: " + newH);
	this.height = newH;
	this.domElem.css("height", ""+(newH)+"px");
	//this.valueChanged();
	this.attributeChanged("height", newH);
};

CanvasObject.prototype.setOpacity = function(op) {
	this.opacity = op;
	this.domElem.css("opacity", op);
}

CanvasObject.prototype.setBackground = function(bg) {
	this.background = bg;
	this.domElem.css("background", bg);
}

CanvasObject.prototype.setBackgroundImage = function(imgUrl) {
	this.dprint("set background image: " + imgUrl);
	
	
	
	if (imgUrl == "") {
		this.backgroundImage = "";
		this.domElem.css("background-image", "none");
	} else {
		this.backgroundImage = "url('"+imgUrl+"')";
		this.domElem.css("background-image", "url('"+imgUrl+"')");
		
		//var i = new Image(); 
		//i.src = imgUrl; 
		//i.onload = imageLoaded; 
		
		var _parent = this;
		var _img = new Image();
		_img.src=imgUrl;
		
		_img.onload = function() {
			cprint("image loaded");
			cprint("w: "+_img.width);
			cprint("h: "+_img.height);
			
			_parent.setWidth(_img.width);
			_parent.setHeight(_img.height);
		}
		_img.onerror=function() {
			cprint("image error");
			_parent.setBackgroundImage("");
		};
		_img.onabort=function() {
			cprint("image abort");
			_parent.setBackgroundImage("");
		};
	}
	this.valueChanged();
};

CanvasObject.prototype.attributeChanged = function(name, value) {
	theControlPanel().objectAttributeChanged(name, value);
}

CanvasObject.prototype.valueChanged = function() {
	//theControlPanel().fullRefresh();
	//updateControlPanel();
}

CanvasObject.prototype.dprint = function(str) {
	if (CanvasObject.debug) {
		cprint(CanvasObject.className + ": " + str, "#ff0000");
	}
}